<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid #333;
			}
		</style>
	</head>
	<body>
		<!-- canvas画布的大小，不能用css来调整，用属性来调整 -->
		<canvas id="canvas" width="600" height="400"></canvas>
		
	</body>
	<script type="text/javascript">
		//获取画布
		let canvas=document.getElementById("canvas");
		//获取上下文
		let ctx=canvas.getContext("2d");
		
		//左上角绘制实心矩形
		ctx.fillStyle="red"
		ctx.fillRect(0,0,50,50)
		
		let x=0,y=0;
		let yDirection=true;		//true 向下运动；false 向上运动
		let xDirection=true;		//ture 向右运动；false 向左运动
		setInterval(()=>{
			ctx.clearRect(x,y,50,50)
			
			// x的累加或累减
			if(xDirection){
				x++
			}else{
				x--
			}
			
			//方块到达右侧的时候，x向左运动
			if(x>=550){
				xDirection=false;
			}
			
			//方块到达左侧的时候，x向右运动
			if(x<=0){
				xDirection=true;
			}
			
			
			//y累加或者累减
			if(yDirection){
				y++
			}else{
				y--;
			}
			
			//方块到达底部的时候，向上运动
			if(y>=350){
				yDirection=false;
			}
			
			//方块到达顶部的时候，向下运动
			if(y<=0){
				yDirection=true;
			}
			
	
			//当y<=350的时候，y一直累加
			//当y>350的时候，y一直累减
			
			
			ctx.fillRect(x,y,50,50)
		},10)
	

		
	</script>
</html>